<template>
  <button
    @click="toggleTheme"
    class="theme-toggle-btn relative w-10 h-10 rounded-lg flex items-center justify-center text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all duration-300 focus:outline-none"
    :class="{ 'theme-toggle-active': isDark }"
    aria-label="Toggle theme"
  >
    <div class="relative w-5 h-5">
      <!-- Sun icon -->
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="absolute inset-0 transform transition-transform duration-500"
        :class="isDark ? 'rotate-90 opacity-0' : 'rotate-0 opacity-100'"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
        />
      </svg>
      <!-- Moon icon -->
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="absolute inset-0 transform transition-transform duration-500"
        :class="isDark ? 'rotate-0 opacity-100' : '-rotate-90 opacity-0'"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
        />
      </svg>
    </div>
  </button>
</template>

<script setup>
import { useTheme } from '@/composables'

const { isDark, toggleTheme } = useTheme()
</script>

<style scoped>
.theme-toggle-btn {
  transform-style: preserve-3d;
  perspective: 1000px;
}

.theme-toggle-btn:active {
  transform: scale(0.95);
}

.theme-toggle-active {
  animation: toggle-press 0.2s ease-in-out;
}

@keyframes toggle-press {
  0% { transform: scale(1); }
  50% { transform: scale(0.92); }
  100% { transform: scale(1); }
}

/* Add ripple effect */
.theme-toggle-btn::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: currentColor;
  border-radius: inherit;
  opacity: 0;
  transition: all 0.3s ease;
  transform: scale(1.5);
}

.theme-toggle-btn:active::after {
  opacity: 0.1;
  transform: scale(1);
  transition: 0s;
}
</style>
